<script setup>
/**
 * & 文件引入区域
 */
import { routeQuery, OpenChildrenPage } from "@/hook/routerHandle.js";
import { onBeforeMount } from "vue";
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getJWTFun } from "@/hook/jsrsasign";
import { applyShopCommodityLive } from "@/server/api/Room_type_interface.js";
import { useUseStore } from "@/stores/user";
import { generateUnpaidLiveOrderAPI } from "@/server/api/rechargeOrder";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const userData = useUseStore();
const query = routeQuery();
console.log("item:", query);

/**
 * & 注册区
 */

/**
 * & 变量声明区
 */
let formData = ref([
  {
    title: "入住人",
    placeholder: "只填写一人名字",
    vl: "",
  },
  {
    title: "联系电话",
    placeholder: "+86",
    vl: "",
  },
]);
let userName = ref("");
let phone = ref("");
const router = useRouter();
const route = useRoute();
/**
 * & 函数区
 */

const toHotelPay = async () => {
  let param = {
    commodityId: query.roomId,
    endTime: query.outData.join("-") + "T12:00:00.000Z",
    name: userName.value,
    phone: phone.value,
    roomId: query.roomId,
    shopId: query.shopId,
    startTime: query.inData.join("-") + "T14:00:00.000Z",
    transactionAmount: (query.liveDays * query.price).toFixed(2),
    uid: userData.userId,
  };
  console.log("param22:", param);
  let res = await applyShopCommodityLive(param);
  console.log("resBooking:", res);

  const requestData = {
    transactionAmount: param.transactionAmount + "",
    shopId: param.shopId,
    commodityId: param.commodityId,
    uid: userData.userId,
    number: 1,
    exp: Math.floor(Date.now() / 1000) + 600, // 过期时间（当前时间戳加10分钟）
  };

  //toke加密
  const tokenizedData = getJWTFun(requestData);
  // 生成订单接口方法

  const result = await generateUnpaidLiveOrderAPI(tokenizedData);
  console.log(tokenizedData);
  let orderId = result.data.data;
  if (result.data.code !== 200) {
    return console.log("订单生成失败,请联系后台管理人员");
  }
  console.log(orderId);
  console.log(result);

  OpenChildrenPage("/hotelPay", {
    needPayMoney: param.transactionAmount,
    orderId: orderId,
    commodityId: param.commodityId,
  });
  // router.push({
  //   path: "/hotelPay",
  // });
};

onBeforeMount(() => {
  console.log(route.query.price);
});
</script>

<template>
  <div class="hotelOrder">
    <div class="bgMask"></div>

    <div class="pageTop">
      <img src="/images/Shop/backBtn1.png" alt="" class="backBtn" @click="$router.back()" />

      <div class="title">{{ query.title }}</div>
    </div>

    <div class="formList">
      <div class="orderInfo">
        <div class="title">
          {{ $t('hotelDetail.from') }}
          {{ query.inData[1] }}{{ $t('hotelDetail.month') }}
          {{ query.inData[2] }}{{ $t('hotelDetail.day') }}<span> {{ $t('hotelDetail.to') }} </span>
          {{ query.outData[1] }}月{{ query.outData[2] }}日
          <span>共{{ query.liveDays }}晚</span>

        </div>

        <div class="name">{{ query.title }}</div>

        <div class="type">{{ query.bedType }}</div>
      </div>

      <div class="formData">
        <div class="title">入住信息</div>

        <div class="item">
          <div class="title">房间信息</div>
          <div class="num">1间</div>
          <div class="tips">每间最多住2人</div>
        </div>

        <!-- <div class="item" v-for="(item, i) in formData" :key="i">
          <div class="title">{{ item.title }}</div>
          <input type="text" v-model="item.vl" :placeholder="item.placeholder" />
        </div> -->
        <div class="item">
          <div class="title">入住人：</div>
          <input type="text" placeholder="只填写一人名字" v-model="userName" />
        </div>
        <div class="item">
          <div class="title">联系电话：</div>
          <input type="text" placeholder="+86" v-model="phone" />
        </div>
      </div>

      <div class="discount">
        <div class="title">本单可享</div>
        <div class="item" v-for="(item, i) in 3" :key="i">
          <div class="title">促销优惠</div>
          <div class="discountInfo">Pi-50%</div>
        </div>
      </div>
    </div>

    <div class="bottom_bar">
      <div class="left">
        <div class="price">
          <strong>总价：</strong> Pi
          <span>{{ (query.liveDays * query.price).toFixed(2) }}</span>
        </div>
      </div>

      <div class="right">
        <div class="booking" @click="toHotelPay">去支付</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.hotelOrder {
  position: relative;
  min-height: 100vh;

  >.bgMask {
    position: fixed;
    z-index: -1;
    top: 0;

    width: 100%;
    height: 40vh;
    background-image: linear-gradient(180deg,
        #642e8e 0%,
        #7c4fa0 37.5%,
        #fff 100%);
  }

  >.pageTop {
    display: flex;
    align-items: center;
    position: relative;

    padding: 16rem 0;

    >.backBtn {
      position: absolute;
      width: 24rem;
      margin-left: 16rem;
    }

    >.title {
      width: 100%;
      text-align: center;
      font-size: 18rem;
      font-weight: 500;
      line-height: 26rem;
      color: #fff;
    }
  }

  >.formList {
    padding: 16rem 16rem 0;

    >div {
      background: #fff;
      border-radius: 12rem;
      box-shadow: 0rem 5rem 10rem -3rem rgba(184, 184, 184, 0.5);
      margin-bottom: 16rem;
    }

    >.orderInfo {
      padding: 12rem 12rem 30rem;
      box-shadow: unset;

      >.title {
        color: #1a1a1a;
        font-size: 24rem;
        font-weight: 500;
        line-height: 34rem;
        margin-bottom: 8rem;

        >span {
          font-size: 14rem;

          &:last-of-type {
            color: #666;
          }
        }
      }

      >.name {
        font-size: 16rem;
        font-weight: 600;
        line-height: 22rem;
        color: #333;
        margin-bottom: 2rem;
      }

      >.type {
        font-size: 14rem;
        font-weight: 400;
        line-height: 20rem;
        color: #999;
        padding-bottom: 20rem;

        border-bottom: 1rem solid #e6e6e6;
      }
    }

    >.formData,
    >.discount {
      padding: 12rem 12rem 26rem;

      >.title {
        /** 文本1 */
        font-size: 18rem;
        font-weight: 600;
        line-height: 25rem;
      }

      >.item {
        display: flex;
        align-items: center;
        padding: 16rem 0;
        border-bottom: 1rem solid #e6e6e6;

        line-height: 20rem;
        font-size: 14rem;

        >.title {
          font-weight: 500;
          color: #999;

          width: 84rem;
        }

        >.num {
          margin-right: 35rem;
        }

        >input {
          flex: 1;
        }

        >.discountInfo {
          color: #642e8e;
        }
      }
    }

    >.discount {
      padding-bottom: 2rem;

      >.item {
        padding: 12rem 0;

        >.title {
          width: 145rem;
        }

        &:last-of-type {
          border: 0;
        }
      }
    }
  }

  >.bottom_bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;

    padding: 14rem 18rem 14rem 16rem;
    background: #f5f6f7;

    display: flex;
    justify-content: space-between;

    >div {
      align-items: center;
      display: flex;
    }

    >.left {
      text-align: center;

      >.price {
        font-size: 14rem;
        font-weight: 600;
        line-height: 28rem;
        color: #642e8e;

        margin-right: 14rem;

        >span {
          font-size: 20rem;
          margin-left: 5rem;
        }

        >strong {
          color: #262626;
        }
      }
    }

    >.right {
      >.booking {
        font-size: 14rem;
        font-weight: 500;
        line-height: 20rem;
        color: #fff;

        padding: 9rem 52rem;
        border-radius: 20rem;
        background: #642e8e;
      }
    }
  }
}
</style>
